<template>
	<div class="parent" v-bind:class="{overflow:isOverflow}">
		<div class="header">
			<img class="vipImg" src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/vipTemplate.png" />
			<div v-if='cardVip == true' class='exchangeCode'>
				<label>兑换码：</label>
				<input type="text" class="exchangeInput" v-model="vipCode" placeholder='请输入您的兑换码'  maxlength="8" size="8" disabled="disabled"/>
				<button class="exchangeButton" @click="goWXMiniapp">前往商城</button>
			</div>
			<div v-else='cardVip == false' class='exchangeCode'>
				<label>兑换码：</label>
				<input type="text" class="exchangeInput" v-model="exchangeCode" placeholder='请输入您的兑换码' maxlength="8" size="8"/>
				<button class="exchangeButton" @click="exchange">兑换</button>
			</div>
			<div class="underline">

			</div>
		</div>
		<div class="section"></div>
		<div class="app">
			<div id="app">
				<div class="page">
					<div class="tips">会员权益</div>
					<div class="legal-box">
						<div class="title">1.全场商品成本价</div>
						<div class="info">
							平均购买约2-3件商品即可赚回会员费哟！
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/lagel_1.png" />
						</div>
					</div>
					<div class="legal-box">
						<div class="title">2.邀请好友获得奖励金</div>
						<div class="info">
							可以通过微信小程序向好友发起会员卡开通邀请，好友通过您分享的链接开通花卡，方可确认本次邀请成功，邀请成功您可获得100元现金奖励，如您邀请的好友邀请其他用户（直属邀请）开通花卡，您同时也可获得10元奖励金，获得的奖励金可通过我的邀请（查看更多）-申请提现，运营审核通过后将与您联系发放奖励金。
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/vipre.jpg" />
						</div>
					</div>
					<div class="legal-box">
						<div class="title">3.全场免运费</div>
						<div class="info">
							花卡会员在会员时间内（免运费时间以下单时间为准）在花伴商城新购买的订单实行全场包邮！
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/lagel_2.png" />
						</div>
					</div>
					<div class="legal-box">
						<div class="title">4.低息分期付</div>
						<div class="info">
							申请马上花额度成功的花伴会员用户可享受3期免息分期等福利。
						</div>
						<div class="img-box">
							<img src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/lagel_3.png" />
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<modal v-if='isOverflow' v-on:components-modal='removeToast'  v-on:content='holdToast'>
			<img slot="title" class="modalTitle" src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/H5/huaban_mini_qrcode.jpeg"/>
			<p slot='info' class="modalInfo">长按识别小程序二维码</p>
		</modal>
		
		<!--<modal v-show='modalFailFlag'>
			<img slot="title" class="modalFailTitle" src="http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/failIcon.png"/>
			<div slot='info' class="modalFailInfo">
				<p class="firstP">非常抱歉</p>
				<p class="secondP">{{failInfo}}</p>
			</div>
		</modal>-->
	</div>
</template>

<script>
	const cardVip = sessionStorage.getItem("cardVip")
	const vipCode = sessionStorage.getItem("vipCode")
	import http from '@/util/http'
	import Api from '@/util/api'
	import Modal from '@/components/modal'
	import Util from '@/util/util'
	console.log(cardVip)
	export default {
		data() {
			return {
				exchangeCode: '',
				modalFlag: true,
				modalFailFlag: true,
				failInfo: '您输入的兑换码错误', // 您输入的兑换码已兑换
				cardVip: cardVip,
				vipCode: vipCode,
				isOverflow: false,
			}
		},
		components: {
			Modal
		},
		computed: {

		},
		methods: {
			exchange() { // 兑换事件
				console.log(this.exchangeCode)
				if(this.exchangeCode == '') {
					return this.toast('请输入您的兑换码')
				}
				http.post(Api.huakaExchangeVipMember, {
					cardNo: this.exchangeCode
				}).then((d) => {
					if(d.code == 200) {
						if(d.data.result == 'ISVIPALREADY') { // 已经是会员的
							var pattern = /(\d{2})(\d{4})(\d{2})/;
							this.exchangeCode = this.exchangeCode.replace(pattern, '$1****$3')
							this.toast(d.data.msg)
							this.cardVip = true
							this.vipCode = this.exchangeCode
						} else if(d.data.result == 'CARDISALREADYUSED') { // 该vip券已使用
							this.toast(d.data.msg)
						} else if(d.data.result == 'SUCCESS') { // 兑换成功
							var pattern = /(\d{2})(\d{4})(\d{2})/;
							this.exchangeCode = this.exchangeCode.replace(pattern, '$1****$3')
							this.toast(d.data.msg)
							this.cardVip = true
							this.vipCode = this.exchangeCode
						} else if(d.data.result == 'CARDCODEERROR') { // 兑换码错误
							this.toast(d.data.msg)
						}
//						sessionStorage.setItem('plus_token', d.data.token)
//						localStorage.setItem('user_info', JSON.stringify(d.data))
//						
//						if(this.$route.query.frompage) {
//							this.$router.replace(this.$route.query.frompage);
//						} else {
//							if(window.history.length > 2) { //没有获取到参数直接返回页面
//								window.history.go(-1);
//							} else {
//								this.$router.push("/find");
//							}
//						}

					} else {
						this.toast(d.message)
					}
				}).catch((e) => {
					this.toast('兑换失败，请检查您的网络')
				})
			},
			goWXMiniapp() { // 去小程序
				this.isOverflow = true
			},
			removeToast() {
				this.isOverflow = false
			},
			holdToast() {
				this.isOverflow = true
			}
		},
	}
</script>

<style scoped>
	html,
	body,
	ul,
	li {
		margin: 0;
		padding: 0;
		list-style: none;
		height: 100%;
	}
	
	.overflow{
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}
	
	.modalTitle{
		width: 4.3rem;
		height: 4.3rem;
		margin: .6rem .58rem .35rem .58rem;
	}
	.modalFailTitle{
		width: 1.2rem;
		height: 1.2rem;
		margin: .6rem 2.13rem .44rem 2.13rem;
	}
	.modalInfo{
		text-align: center;
		height: .45rem;
		line-height: .45rem;
		color: rgba(70,70,70,1);
		font-size: .32rem;
		margin-bottom: .7rem;
	}
	.firstP{
		text-align: center;
		height: .45rem;
		line-height: .45rem;
		color: rgba(70,70,70,1);
		font-size: .32rem;
		margin-bottom: .21rem;
	}
	.secondP{
		text-align: center;
		height: .28rem;
		line-height: .28rem;
		color: rgba(144,144,144,1);
		font-size: .28rem;
		margin-bottom: .69rem;
	}
	.header {
		padding: .5rem .75rem;
	}
	
	.vipImg {
		width: 6rem;
		height: 3.35rem;
		margin-bottom: .2rem;
	}
	
	.exchangeCode {
		width: 6rem;
		height: .58rem;
		display: flex;
		margin-bottom: .19rem;
	}
	
	.exchangeCode label {
		width: 1.4rem;
		height: .58rem;
		font-size: .3rem;
		font-family: PingFangSC-Regular;
		color: rgba(70, 70, 70, 1);
		line-height: .58rem;
	}
	
	.exchangeInput {
		width: 3.2rem;
		height: .58rem;
		line-height: .58rem;
		font-size: .3rem;
	}
	
	.exchangeButton {
		width: 1.34rem;
		height: .58rem;
		background: rgba(251, 194, 0, 1);
		border-radius: .1rem;
		font-size: .3rem;
		line-height: .58rem;
	}
	
	.underline {
		width: 6rem;
		height: .01rem;
		background: rgba(230, 230, 230, 1);
	}
	
	.section {
		width: 7.5rem;
		height: .18rem;
		background: rgba(242, 242, 242, 1);
	}
	
	.app {
		max-width: 750px;
		min-width: 320px;
		height: 100%;
		width: 100%;
		margin: 0px auto;
		min-height: 100%;
		position: relative;
		display: flex;
	}
	
	#app {
		height: 100%;
		width: 100%;
	}
	
	@media screen and (min-width: 750px) {
		.app {
			background-color: #fff;
		}
		body {
			background-color: #000;
		}
	}
	
	.page {
		padding: .5rem .3rem;
	}
	
	.legal-box {
		margin-top: .5rem;
	}
	
	.legal-box .title {
		font-family: PingFangSC-Regular;
		font-size: .28rem;
		color: #464646;
		letter-spacing: 0;
		line-height: .28rem;
	}
	
	.tips {
		font-family: PingFangSC-Semibold;
		font-size: .32rem;
		color: #464646;
		letter-spacing: 0;
		line-height: .32rem;
	}
	
	.info {
		font-family: PingFangSC-Regular;
		font-size: .28rem;
		color: #909090;
		letter-spacing: 0;
		margin-top: .2rem;
	}
	
	.info p {
		padding: 0;
		margin: 0;
		position: relative;
		padding-left: .1rem;
	}
	
	.info p::before {
		content: "·";
		position: absolute;
		left: -0.05rem;
	}
	
	.img-box {
		height: 1.9rem;
		width: 6.9rem;
		background-color: #f2f2f2;
		border-radius: .1rem;
		margin-top: .5rem;
	}
	
	.img-box img {
		width: 100%;
		height: 100%;
		border-radius: .08rem;
	}
</style>